$(function() {
	initSalesChart();
	initListence();
})

function initListence(){
	//事件监听
	//$("#btn_notice").off("click").on("click",notice);
}

function initSalesChart() {
	'use strict'
	var ticksStyle = {
		fontColor : '#495057',
		fontStyle : 'bold'
	}

	var mode = 'index'
	var intersect = true

	var $salesChart = $('#sales-chart')
	var salesChart = new Chart($salesChart, {
		type : 'bar',
		data : {
			labels : [ '一月', '二月', '三月', '四月', '五月', '六月'],
			datasets : [ {
				backgroundColor : '#007bff',
				borderColor : '#007bff',
				data : [ 1000, 2000, 3000, 2500, 2700, 2500]
			}, {
				backgroundColor : '#ced4da',
				borderColor : '#ced4da',
				data : [ 700, 1700, 2700, 2000, 1800, 1500]
			} ]
		},
		options : {
			maintainAspectRatio : false,
			tooltips : {
				mode : mode,
				intersect : intersect
			},
			hover : {
				mode : mode,
				intersect : intersect
			},
			legend : {
				display : false
			},
			scales : {
				yAxes : [ {
					// display: false,
					gridLines : {
						display : true,
						lineWidth : '4px',
						color : 'rgba(0, 0, 0, .2)',
						zeroLineColor : 'transparent'
					},
					ticks : $.extend({
						beginAtZero : true,

						callback : function(value, index, values) {
							if (value >= 1000) {
								value /= 1000
								value += 'k'
							}
							return '$' + value
						}
					}, ticksStyle)
				} ],
				xAxes : [ {
					display : true,
					gridLines : {
						display : false
					},
					ticks : ticksStyle
				} ]
			}
		}
	})

	var $visitorsChart = $('#visitors-chart')
	var visitorsChart = new Chart($visitorsChart,
			{
				data : {
					labels : [ '周一', '周二', '周三', '周四', '周五', '周六',
							'周日' ],
					datasets : [ {
						type : 'line',
						data : [ 100, 120, 170, 167, 180, 177, 160 ],
						backgroundColor : 'transparent',
						borderColor : '#007bff',
						pointBorderColor : '#007bff',
						pointBackgroundColor : '#007bff',
						fill : false
					}, {
						type : 'line',
						data : [ 60, 80, 70, 67, 80, 77, 100 ],
						backgroundColor : 'tansparent',
						borderColor : '#ced4da',
						pointBorderColor : '#ced4da',
						pointBackgroundColor : '#ced4da',
						fill : false
					} ]
				},
				options : {
					maintainAspectRatio : false,
					tooltips : {
						mode : mode,
						intersect : intersect
					},
					hover : {
						mode : mode,
						intersect : intersect
					},
					legend : {
						display : false
					},
					scales : {
						yAxes : [ {
							gridLines : {
								display : true,
								lineWidth : '4px',
								color : 'rgba(0, 0, 0, .2)',
								zeroLineColor : 'transparent'
							},
							ticks : $.extend({
								beginAtZero : true,
								suggestedMax : 200
							}, ticksStyle)
						} ],
						xAxes : [ {
							display : true,
							gridLines : {
								display : false
							},
							ticks : ticksStyle
						} ]
					}
				}
			})
}
